// 外观模式
function $(id) {
  return document.getElementById(id)
}
function create(id) {
  return document.createElement(id)
}


// 创建闭包，页面加载立即执行
let Observer = (function () {
  // 私有变量命名规范
  // 消息容器不应该被篡改所以作为静态私有变量保存
  // 只是作为参考标准，仍可以访问修改
  let _messages = {}
  return {
    // 注册信息接口
    regist(type, fn) {
      if (typeof _messages[type] === 'undefined')
        _messages[type] = [fn]
      else
        _messages[type].push(fn)
    },
    // 发布信息接口
    fire(type, args) {
      if (!_messages[type])
        return
      let events = {
        type: type,
        args: args || {}
      }
      for (i = 0, len = _messages[type].length; i < len; i++)
        _messages[type][i].call(this, events)
    },
    // 移除信息接口
    remove(type, fn) {
      if (_messages[type] instanceof Array) {
        let i = _messages[type].length - 1
        for (; i >= 0; i--)
          _messages[type][i] === fn && _messages[type].splice(i, 1)
      }
    }
  }
})()


  // 工程师A
  (function () {
    function addMsgItem(e) {
      let text = e.args.text,
        ul = $('msg'),
        li = create('li'),
        span = create('span')
      li.innerHTML = text

      span.onclick = function () {
        ul.removeChild(li)
        Observer.fire('removeCommentMessage', {
          num: -1
        })
      }

      li.appendChild(span)
      ul.appendChild(li)
    }
    Observer.regist('addCommentMessage', addMsgItem)
  })()


  // 工程师B
  (function () {
    function changeMsgNum(e) {
      let num = e.args.num
      $('msg_num').innerHTML = parseInt($('msg_num').innerHTML) + num
    }
    Observer.regist('addCommentMessage', changeMsgNum).regist('removeCommentMessage', changeMsgNum)
  })()


  // 工程师C
  (function () {
    $('user_submit').onclick = function () {
      let text = $('user_input')
      if (text.value === '')
        return
      Observer.fire('addCommentMessage', {
        text: text.value,
        num: 1
      })
      text.value = ''
    }
  })()